<template>
  <div class="subscribeTab">
    <div class="card-block" v-for="(subscribe, index) in subscribeList" :key="index">
      <table>
        <tr>
          <td class="title-td">姓&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;名</td>
          <td class="content-td">{{subscribe.name}}</td>
          <td colspan="2" style="text-align: right; color: #f9c270">未处理</td>
        </tr>
        <tr>
          <td class="title-td">电话号码</td>
          <td class="content-td">{{subscribe.mobile}}</td>
        </tr>
        <tr>
          <td class="title-td">地&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;址</td>
          <td class="content-td" colspan="3">{{subscribe.address}}</td>
        </tr>
        <tr>
          <td class="title-td">户&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;型</td>
          <td class="content-td">{{subscribe.house}}</td>
          <td class="title-td">房屋面积</td>
          <td class="content-td">{{subscribe.area}}㎡</td>
        </tr>
        <tr>
          <td class="title-td">装修预算</td>
          <td class="content-td" colspan="3">&yen;{{subscribe.budget}}</td>
        </tr>
        <tr>
          <td class="title-td">需要设计</td>
          <td class="content-td">{{subscribe.design}}</td>
          <td class="title-td">设计档次</td>
          <td class="content-td">&yen;{{subscribe.level}}/㎡</td>
        </tr>
        <tr>
          <td class="title-td">备&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;注</td>
          <td class="content-td" colspan="3">{{subscribe.remark}}</td>
        </tr>
      </table>
      <button>取 消</button>
    </div>
  </div>
</template>

<script>
import { } from 'vux'

export default {
  props: {
  },
  components: {
  },
  data () {
    return {
      subscribeList: [{
        name: '杨彬',
        mobile: '15659734990',
        address: '福建省福州市仓山区',
        house: 1,
        area: 120,
        budget: 100000,
        design: 1,
        level: 1,
        remark: '啦啦啦啦啦啦啦啦啦啦啦啦啦啦'
      }, {
        name: '杨彬',
        mobile: '15659734990',
        address: '福建省福州市仓山区',
        house: 1,
        area: 120,
        budget: 100000,
        design: 1,
        level: 1,
        remark: '啦啦啦啦啦啦啦啦啦啦啦啦啦啦'
      }]
    }
  },
  watch: {

  },
  methods: {

  }
}
</script>

<style lang="less">
.subscribeTab {
  .card-block {
    margin: 0 auto 15px auto;
    width: 86%;
    padding: 10px;
    background: #fff;
    border-radius: 10px;
    font-size: 12px;
    box-shadow: 0 5px 15px @shadow-color;
    tr {
      height: 25px;
    }
    .title-td {
      width: 20%;
      text-align: right;
      color: @font-vice-color;
      padding-right: 10px;
    }
    .content-td {
      width: 30%;
      text-align: left;
      color: @font-color;
    }
    button {
      border: none;
      border-radius: 5px;
      background: @btn-color;
      color: #fff;
      height: 25px;
      width: 60px;
      box-shadow: 0 5px 15px @btn-shadow-color;
    }
  }
}
</style>
